<script lang="ts" setup>
import { ref } from 'vue';
import { useAppStore } from '@/mobile/stores/app';
import { useFetch } from '@/mobile/hooks/fetch';
import { useAsyncData } from '@/mobile/hooks/async-data';

const { $fetch } = useFetch()
const appStore = useAppStore();
const communityInfo = appStore.config;
const userInfo = appStore.user;

const isShow = ref(true);

const handlleClose = () => {
  isShow.value = false;
}

const { data: isMember, refresh } = useAsyncData(
  'mobile:isMember',
  () => userInfo.id && $fetch('/user/isMembers'),
);

const joinCommunity = async (refreshPage: boolean = false) => {
  const { isSuccess } = await $fetch('/user/joinCommunity', {
    autoGotoLogin: true,
  });

  if (isSuccess) {
    if (refreshPage) {
      window.location.reload();
    }
    else {
      refresh();
    }
    console.log('success');
  } else {
    console.log('fail');
  }
};
</script>

<template>
  <div class="fixed bottom-8 left-0 right-0 z-999 mx-9 mb-[env(safe-area-inset-bottom)] h-40 flex-y-center justify-between rounded-4 bg-#3D7CFA px-12 opacity-94 shadow-[0_0_8px_0_rgba(0,0,0,0.1)]" v-if="isShow && !isMember">
    <div class="flex-y-center">
      <div class="i-icons:close mr-12 size-16 text-#fff" @click="handlleClose()"></div>
      <div class="mr-10 h-20 rounded-2 bg-#fff px-8 py-2 text-12 text-#3d7cfa font-500 leading-16">{{ $t('mobile.home.join.title') }}</div>
      <div class="max-w-160 truncate text-14 text-#fff font-500 leading-20">{{ communityInfo.name }}</div>
    </div>
    <button type="button" class="h-24 border-1 border-#fff rounded-full bg-transparent px-12 text-12 text-#fff font-400" @click="joinCommunity(true)">{{ $t('mobile.home.join.join') }}</button>
  </div>
</template>

<style lang="scss" scoped>
</style>
